<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div :class="{ home: true, vh: !show }">

    <headerBar v-show="show" class="header" @wheel="onwheel"></headerBar>
    <SplitText :style="`opacity: ${!show ? 1 : 0};`" @clickk="onclickk"></SplitText>
    <router-view />
  </div>
</template>

<script setup lang="ts">
import { onBeforeUnmount, onMounted, ref } from 'vue';
import SplitText from './SplitText/index.vue'
import movent from '../../utils/MouseMovementBox'

const show = ref<boolean | null>(null)



//是否显示首页头部
//判断是否显示首页头部

if (localStorage.getItem('show')) {

  show.value = JSON.parse(localStorage.getItem('show')!).show
} else {

  show.value = true
  localStorage.setItem('show', JSON.stringify({ show: true }))
}
const onwheel = function (event: {
  preventDefault: Function;
  deltaY: number;
}) {
  const itemHeight: number = (document.querySelector('.header') as HTMLElement).offsetHeight
  // ，按照滚动方向滚动页面
  let start: number = window.pageYOffset;
  let end: number = event.deltaY > 0 ? itemHeight : 0;
  let duration: number = 500; // 滚动动画的持续时间，单位为毫秒
  let startTime: number | null = null;
  let settimeout: number = 0
  function scroll(timestamp: number) {

    if (!startTime) {
      startTime = timestamp;
    }
    let progress: number = timestamp - startTime;
    let position: number = start + (end - start) * (progress / duration);
    window.scrollTo(0, position);
    if (progress < duration) {
      settimeout = window.requestAnimationFrame(scroll);
    }
    //对首页进行隐藏

    if (window.scrollY >= itemHeight - 10) {
      show.value = false
      localStorage.setItem('show', JSON.stringify({ show: false }))
    }
  }
  window.cancelAnimationFrame(settimeout)
  window.requestAnimationFrame(scroll);

}
//裂开字体事件
function onclickk() {
  const itemHeight: number = window.innerHeight
  show.value = true
  localStorage.setItem('show', JSON.stringify({ show: true }))
  let startTime: number = 0;
  //位移开始
  let start: number = itemHeight;
  //动画总时长
  let duration: number = 500;
  //清楚frame动画所存的id
  let settime: number = 0
  function scrollto(timestamp: number) {
    if (!startTime) {
      startTime = timestamp;
    }

    let progress: number = timestamp - startTime;
    let position: number = start + (0 - start) * (progress / duration);

    window.scrollTo(0, position);
    if (progress < duration) {
      settime = window.requestAnimationFrame(scrollto);
    }

  }
  window.cancelAnimationFrame(settime)

  window.requestAnimationFrame(scrollto);


}
onBeforeUnmount(() => {
  localStorage.setItem('show', JSON.stringify({ show: true }))
})

onMounted(() => {

  movent(document.querySelector(".headerBar")!)
})
</script>

<style scoped lang="scss">
.home {
  position: relative;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  overflow: hidden;



  .navbar {
    height: 100vh;
  }
}

.vh {
  height: 100vh !important;

}
</style>